<template>
	<v-dialog v-model="visible" width="600px">
		<v-card>
			<v-card-text>
				<div class="pt-5">{{ modText }}用户角色</div>
			</v-card-text>
			<v-card-text>
				<v-form @submit.prevent.stop.capture ref="form">
					<v-row>
						<v-col cols="4" v-for="item in roles" :key="item.id">
							<v-checkbox :value="item.id" :label="item.displayName" v-model="rolesIds"></v-checkbox>
						</v-col>
					</v-row>
				</v-form>
			</v-card-text>
			<v-card-actions class="justify-end">
				<v-btn @click="visible = false">取消</v-btn>
				<v-btn color="success" :loading="confirmLoading" @click="onSave">确认</v-btn>
			</v-card-actions>
		</v-card>
	</v-dialog>
</template>

<script>
import MdDialogMixins from '@/common/mixins/MdDialogMixins';
import RoleApi from '@/common/api/RoleApi';
import UserApi from '@/common/api/UserApi';

export default {
	name: 'UserRoleDialog',
	mixins: [MdDialogMixins],
	data() {
		return {
			roles: [],
			rolesIds: []
		}
	},
	methods: {
		edit(row) {
			if (this.roles.length === 0) {
				this.getRoles();
			}
			this.action(row, 'edit');
			this.getUserRoles();
		},
		getRoles() {
			RoleApi.list().then(res => {
				this.$utils.responseHandler(res).then(({data}) => {
					this.roles = data || []
				})
			})
		},
		getUserRoles() {
			UserApi.roles.list({id: this.form.id}).then(res => {
				this.$utils.responseHandler(res).then(({data}) => {
					this.rolesIds = data || []
				})
			})
		},
		onSave() {
			this.confirmLoading = true;
			UserApi.roles.create({usersId: this.form.id, rolesIds: this.rolesIds}).then(res => {
				this.$utils.responseHandler(res, true, true).then(() => {
					this.visible = false;
				})
			}).finally(() => this.confirmLoading = false)
		}
	}
}
</script>

<style scoped>

</style>